<template>
    <div class="tips">
        <div class="left">
            <div class="title">考生信息</div>
            <div class="user-info">
                <div class="avatar"></div>
                <div class="user-info-text">
                    <div class="line">考号：{{ userStore.getUserinfo.username }}</div>
                    <div class="line">姓名：{{ userStore.getUserinfo.realname }}</div>
                    <div class="line">性别：{{ userStore.getUserinfo.sex }}</div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="right-title">考生须知</div>
            <div class="right-content">
                1、考生应遵守考试纪律规定，听从监考人员指令。
                <br />
                2、考生参加考试时，须持有清晰头像的校园卡及身份证，无证件者不得参加考试；考生应提前分钟进入考场，迟到分钟及以上者不得参加考试。
                <br />
                3、只准携带必要的文具入场，如铅笔(涂答题卡用)、签宁笔、橡皮、不带编程功能的计算器等。禁止随身携带任何书籍、笔记、资料等以及各种无线通信工具（如寻呼机、移动电话）、录放音机、电子记事本等物品。不得使用自带稿纸，课桌上仅可放置文具和有效身份证件。违者将按《考试违纪处理流程》处理。考场内不得擅自相互借用文具。4、考生应按照监考人员指定的座位就坐，将有效身份证件放在指定位置；凡不听从监考人员安排者，将不发给试卷。
                <br />
                5、答题前应认真填写答题卡中的姓名、学校、学号等栏目。凡答题卡中该栏目漏填涂、错填涂或字迹不清、无法辦认的，答题卡一律无效。必须严格要求做答题目。书写部分一律用签字笔做答，填涂信息点时只能用铅笔（）涂黑。只能在规定考生做答的位置书写或填涂信息点。不按规定要求填涂和答的，一律无效。
                <br />
                6、参加闭卷考试的考生，在课桌、抽屉及考位周围不得放置任何教材或参考资料；参加开卷考试的考生，可使用主考教师允许的纸质参考资料，但不得相互借阅：考生在开卷考试中不得使用电脑及同类电子设备。
                <br />
                7、开考前，监考人员将对考场进行检查，考生应协助清查考场，若发现考位周围有他人留下的字迹或复习材料，应立即向监考人员报告。
                <br />
                8、除出现试卷分发错误或字迹模糊等问题时，考生可举手询问外，凡与试题内容有关的问题，监考人员一律不作回答。
                <br />
                9、考生在拿到试卷后，须将本人的姓名和学号等信息正确填写在试卷指定位置，并在规定时间内独立答卷，开考分钟后方可交卷并离开考场。
                <br />
                10、考生在考试过程中如有特殊情况须暂离考场（如去洗手间）时，须经监考人员同意后，由一名监考人员陪同，考生离开返回考场时间等信息将被记录入《好大学在线考场情况登记表》中。
                11、考试结束铃响时，考生应立即停止答卷，并留在座位上等候，由监考人员统一收卷；经监考人员催促仍不交卷者，监考人员可声明不再收卷，则该生该课程考试成绩将按“无效”计；监考人员收卷后，将进行试卷数的核对，核对无误后，监考人员方可宣布考生离开考场；若有试卷缺失，监考人员将当场进行清点核实，并告知缺失试卷者该课程考试成绩按无效计，同时将按考试作弊处理。
            </div>
            <div class="right-footer">
                <el-button v-if="readTime >= 1" disabled style="width: 180px; height: 46px">
                    {{ readTime }}S
                </el-button>
                <el-button
                    v-else
                    type="primary"
                    style="width: 180px; height: 46px"
                    @click="goAnswer"
                >
                    开始答题
                </el-button>
            </div>
        </div>
        <UserinfoDialog v-model="infoShow"></UserinfoDialog>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import UserinfoDialog from './components/userinfoDialog.vue'
import { onMounted, ref } from 'vue'
// import { getNotice } from '@/api/login'
import { useUserinfoStore } from '@/stores/user'
import { useExamStore } from '@/stores/exam'
import { startExam, getCurrentExamData, getQuestion } from '@/api/login'
import { ElMessage } from 'element-plus'

const userStore = useUserinfoStore()
const examStore = useExamStore()
const router = useRouter()
const route = useRoute()

let infoShow = ref(false)

let readTime = ref(3)

let intervalIndex = setInterval(() => {
    if (readTime.value === 0) {
        clearInterval(intervalIndex)
    } else {
        readTime.value--
    }
}, 1000)

let noticeData = ref({})

onMounted(() => {
    getQuestion({
        sbId: route.query.sbId
    }).then(res => {
        if (res.data.code === 0) {
            getExamData(res.data.data.examPaperPath)
        }
    })
})

// 开始考试
async function goAnswer() {
    let res = await startExam({
        sbId: route.query.sbId,
    })
    if (res.data.code === 0) {
        examStore.examStart = true
        examStore.paperInfo.answerStartTime = res.data.data.answerStartTime
        examStore.paperInfo.answerEndTime = res.data.data.answerEndTime

        router.replace({
            path: '/test-paper',
            query: {
                sbId: route.query.sbId,
            },
        })
    }
}

// 获取当前考试数据
async function getExamData(path) {
    let examLocalData = await getCurrentExamData(path)
    if (examLocalData.data.bespeakId) {
        sessionStorage.setItem('examLocalData', JSON.stringify(examLocalData.data))
        examStore.initExamListData(examLocalData.data)
    } else {
        ElMessage.warning('请求试卷失败，请重试')
    }
}

// 获取考试须知
// async function getNoticeData() {
//     let res = await getNotice({ examPlanId: route.query.examPlanId })
//     debugger
//     router.push({

//     })
// }
</script>

<style lang="less" scoped>
.tips {
    display: flex;
    justify-content: space-between;
    .left {
        margin-right: 30px;
        padding: 20px;
        width: 360px;
        height: 240px;
        background-color: #fff;
        box-shadow: 0px 5px 9px 0px rgba(57, 126, 253, 0.0784);
        border-radius: 10px;
        .title {
            margin-bottom: 15px;
            padding-left: 20px;
            border-left: 6px solid #397efd;
            font-size: 22px;
            font-weight: bold;
        }
        .user-info {
            display: flex;
            .avatar {
                margin-top: 14px;
                margin-right: 20px;
                width: 88px;
                height: 109px;
                .bg('pic');
            }
            &-text {
                line-height: 45px;
                font-size: 18px;
                .line {
                    width: 210px;
                    .textoverflow();
                }
            }
        }
    }
    .right {
        position: relative;
        padding: 50px;
        height: 100%;
        width: 1480px;
        background-color: #fff;
        box-shadow: 0 5px 9px 0 rgba(57, 126, 253, 0.0784);
        border-radius: 10px;
        &-title {
            margin-bottom: 35px;
            font-size: 33px;
            text-align: center;
            font-weight: bold;
        }
        &-content {
            width: 100%;
            height: calc(100% - 130px);
            padding: 32px;
            background-color: #f0f6fe;
            overflow-y: auto;
            font-size: 21px;
            color: #333333;
        }
        &-footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80px;
            border-top: 2px solid #d8d8d8;
        }
    }
}
</style>
